<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>模板列表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="order-template">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addTemplate">新增模版</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>

      <div class="order-template-table-div">
        <el-table fit stripe border :data="templateList" style="width: 100%" height="parent">
          <el-table-column label="模版名称" prop="id" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.id}} {{scope.row.temp_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="模版类型" prop="type" min-width="120px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('produceOrder.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('produceOrder.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="125px" header-align="center" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status===0" size="mini" type="primary" @click="updateStatus(scope.row,1)">启用</el-button>
              <el-button v-else-if="scope.row.status===1" size="mini" type="danger" @click="updateStatus(scope.row,0)">禁用</el-button>
              <el-button v-if="scope.row.businessTemplate===1" size="mini" type="primary" @click="lookTempl(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/searchForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js"
  ]);

</script>
<script src="./searchForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        tempName: '',
        type: '',
        status: 1
      };
      return {
        loading: false,
        templateList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },

    created: function () {
      this.setTemplateList(true);
    },

    methods: {
      setTemplateList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        SysUtil.setPostData(postData, search, ['type', 'status']);
        var tempName = search.tempName;
        if (tempName !== '') {
          postData.temp_name = tempName;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/getTemplateList', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var templateList = res.returnData;
          self.templateList = templateList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setTemplateList(true);
      },

      pageChange: function () {
        this.setTemplateList();
      },

      updateStatus: function (temp, status) {
        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/updateTemplateById', {
          id: temp.id,
          status: status
        }).then(function () {
          self.loading = false;
          self.setTemplateList();
        }).catch(function () {
          self.loading = false;
        });
      },

      addTemplate: function () {
        this.openOrderTempl();
      },

      lookTempl: function (templ) {
        this.openOrderTempl({
          templId: templ.id
        });
      },

      openOrderTempl: function (option) {
        var url = './bomBusiness/produceOrder/template.html';
        var $templEl = $(window.parent.document).find(`li a[data-href^='${url}']`);
        if (option === undefined) {
          option = '';
        } else {
          option = JSON.stringify(option);
        }
        $templEl.attr('param', option);
        $templEl[0].click();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    }
  });

  function refreshTable() {
    app.setTemplateList();
  }

</script>

<style>
  .order-template {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .order-template .order-template-table-div {
    flex: 1;
    overflow: auto;
  }

  .order-template .order-template-table-div .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
